<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main"><i class="glyphicon glyphicon-modal-window"></i> 设备管理</a></li>
        <li><a ui-sref="main.dm.warn.list" class="active" ng-bind="title"></a></li>
    </ul>
</div>

<!-- 加载提醒 -->
<div class="text-center m-t-md text-lg dataWarn" ng-show="loading"><i class="fa fa-spin fa-spinner"></i> 数据加载中...</div>

<!-- 内容区域 -->
<div ng-hide="loading" class="wrapper-md content">
    <!-- 数据显示 -->
    <div class="wrapper-data">
        <div class="panel panel-default">
            <!-- 头部 -->
            <div class="panel-heading clearfix">
                <div class="w-auto">
                    <div class="titleBox">
                        <p class="report-title">门禁设备运行情况月报</p>
                        <p class="rportInput clearfix">
                            <select name="real"  id="searchBtn" ng-change="getReportDtae()" ng-model="months">
                                <option value='' class="placehol"  disabled selected style="display:none;" ng-bind="YYYMM"></option>
                                <option ng-repeat="months in mm track by $index" value="{{$index}}" data-code="{{months}}" 
                                ng-bind="months"></option>
                            </select>
                        </p>
                    </div>
                   <div class="reprotBox">
                        <div class="stability" id="stability">

                        </div>
                         <div class="DropStorage" id="DropStorage">
                            
                        </div>
                   </div>
                <!-- 数据表格 -->
                     <div class="titleBox" style="margin-top: 15px;background-color: #fafbfc;">
                        <p class="report-title" style="line-height: 50px;"><span>{{_MM}}</span>月设备离线次数排行</p>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped b-t b-light text-center">
                            <thead>
                            <tr>
                            	<th>序号</th>
                            	<th>设备编号</th>
                            	<th>楼栋地址</th>
                            	<th>离线 / 在线次数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="item in pageInfo.data track by $index">
                                <td class="v-middle" style="width: 5%">{{$index+1}}</td>
                                <td class="v-middle">{{item.deviceCode}}</td>
                                <td class="v-middle">{{item.buildingAddress}}</td>
                                <td class="v-middle" style="width: 15%">{{item.totalOffline}}/{{item.totalCount}}</td>
                            </tr>
                            
                            </tbody>
                        </table>
                    </div>
        			<span data-ng-include=" 'src/tpl/pageInfo.html' "></span>
                </div>
            </div>
        </div>

<style scoped>
.table{
    border: 1px solid #bdc3c7;
}
.table tr td,.table tr th{
    border: 1px solid #bdc3c7;
    text-align: center;
    padding-left: 0!important;
    padding-right: 0!important;
}
.titleBox{
    text-align: center;
}
.titleBox p.report-title{
    font-size: 16px;
    color: #666;
    padding:0;
    margin:0; 
}
.titleBox p.rportInput{

}
#searchBtn{
    width: 150px;
    height: 30px;
    border: 1px solid #bdc3c7;
    padding-left: 10px;
    font-size:14px;
    float: right;
}
.reprotBox{
    width: 100%;
    height:300px;
   
}
.reprotBox .stability,.reprotBox .DropStorage{
    width: 49%;
    height: 300px;
    display: inline-block;
    border: 1px solid #bdc3c7;
}
.reprotBox .DropStorage{
    margin-left: 1.5%
}
label.search_lable{
    width: 80px;
    text-align: right;
}

select[name='real']{
    width: 150px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid #bdc3c7;
    padding-left:5px;
}
select option.placehol{
    optgroup: #dbc3c7!important; 
}

</style>